<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/knockoutjs.js"></script>
	<script type="text/javascript" src="js/knockout.simpleGrid.js"></script>
    <link href="css/tripoli.simple.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
    .ko-grid { margin-bottom: 1em; width: 25em; border: 1px solid silver; background-color:White; }
    .ko-grid th { text-align:left; background-color: Black; color:White; }
    .ko-grid td, th { padding: 0.4em; }
    .ko-grid tr:nth-child(odd) { background-color: #DDD; }
    .ko-grid-pageLinks { margin-bottom: 1em; }
    .ko-grid-pageLinks a { padding: 0.5em; }
    .ko-grid-pageLinks a.selected { background-color: Black; color: White; }
    .liveExample { height:20em; overflow:auto } /* Mobile Safari reflows pages slowly, so fix the height to avoid the need for reflows */
</style>
</head>
<body>
	<div data-bind="simpleGrid:gridViewModel"></div>
	<button data-bind="click:addItem">Add item</button>	
	<button data-bind="click:sortByName">Sort by name</button>
	<button data-bind="click:jumpToFirstPage,enable:gridViewModel.currentPageIndex">Jump to first page</button>
</body>
<script>
	var initialData = [
	    { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
	    { name: "Speedy Coyote", sales: 89, price: 190.00 },
	    { name: "Furious Lizard", sales: 152, price: 25.00 },
	    { name: "Indifferent Monkey", sales: 1, price: 99.95 },
	    { name: "Brooding Dragon", sales: 0, price: 6350 },
	    { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
	    { name: "Optimistic Snail", sales: 420, price: 1.50 }
	];

	var PagedGridModel = function(items){
		this.items = ko.observableArray(items);

		this.addItem = function(){
			this.items.push({name:"New item",sales:0,price:100});
		};

		this.sortByName = function(){
			this.items.sort(function(a,b){
				return a.name < b.name ? -1 : 1 ;
			});
		};

		this.jumpToFirstPage = function(){
			this.gridViewModel.currentPageIndex(0);
		};

		this.gridViewModel = new ko.simpleGrid.viewModel({
			data:this.items,
			columns:[
				{headerText:"Item Name",rowText:"name"},
				{headerText:"Sales Count",rowText:"sales"},
				{headerText:"Price",rowText:function(item){ return "$" + item.price.toFixed(2)}}
			],
			pageSize:4
		});
	};

	ko.applyBindings(new PagedGridModel(initialData));
</script>
</html>